<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Guild Members</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
        .container {
            width: 80%;
            margin: 20px auto;
            background: #fff;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            text-align: center;
            color: #333;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        th, td {
            padding: 10px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #f2f2f2;
        }
        tr:hover {
            background-color: #f5f5f5;
        }
        .registered {
            background-color: #e6ffe6;
        }
        .unregistered {
            background-color: #ffe6e6;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>Guild Members</h1>
    <table id="membersTable">
        <thead>
        <tr>
            <th>Area Name</th>
            <th>Group Name</th>
            <th>Character Name</th>
            <th>Profile</th>
            <th>Avatar</th>
            <th>UUID</th>
            <th>Relation</th>
            <th>Badges</th>
            <th>Admin Tag</th>
            <th>Last Dynamic</th>
            <th>Max ID</th>
            <th>Posts2 Creator Badge</th>
        </tr>
        </thead>
        <tbody>
        <!-- Data will be inserted here by JavaScript -->
        </tbody>
    </table>
</div>

<script>
    // 图片代理服务的URL
    const imageProxyUrl = 'https://res.cloudinary.com/your-cloud-name/image/fetch/';

    // 辅助函数：将图片存储到本地缓存
    function cacheImage(proxyUrl, originalUrl) {
        localStorage.setItem(originalUrl, proxyUrl);
    }

    // 辅助函数：回退到代理URL
    function fallbackToProxy(imgElement, proxyUrl) {
        imgElement.src = proxyUrl;
    }

    // Function to create table rows
    function createTableRow(member, isRegistered) {
        const row = document.createElement('tr');
        row.classList.add(isRegistered ? 'registered' : 'unregistered');

        const areaNameCell = document.createElement('td');
        areaNameCell.textContent = member.area_name;
        row.appendChild(areaNameCell);

        const groupNameCell = document.createElement('td');
        groupNameCell.textContent = member.group_name;
        row.appendChild(groupNameCell);

        const characterNameCell = document.createElement('td');
        characterNameCell.textContent = member.character_name;
        row.appendChild(characterNameCell);

        const profileCell = document.createElement('td');
        profileCell.textContent = member.profile || 'N/A';
        row.appendChild(profileCell);

        const avatarCell = document.createElement('td');
        if (member.avatar) {
            const avatarImg = document.createElement('img');
            avatarImg.src = member.avatar;
            avatarImg.alt = 'Avatar';
            avatarImg.style.width = '50px';
            avatarImg.style.height = '50px';

            // 检查是否已经获取过该图片
            const cachedUrl = localStorage.getItem(member.avatar);
            if (cachedUrl) {
                avatarImg.src = cachedUrl;
            } else {
                avatarImg.onload = () => cacheImage(imageProxyUrl + encodeURIComponent(member.avatar), member.avatar);
                avatarImg.onerror = () => fallbackToProxy(avatarImg, imageProxyUrl + encodeURIComponent(member.avatar));
            }

            avatarCell.appendChild(avatarImg);
        } else {
            avatarCell.textContent = 'N/A';
        }
        row.appendChild(avatarCell);

        const uuidCell = document.createElement('td');
        uuidCell.textContent = member.uuid;
        row.appendChild(uuidCell);

        const relationCell = document.createElement('td');
        relationCell.textContent = member.relation;
        row.appendChild(relationCell);

        const badgesCell = document.createElement('td');
        if (member.badge) {
            const badges = JSON.parse(member.badge);
            badgesCell.textContent = badges.map(badge => badge.badgeName).join(', ');
        } else {
            badgesCell.textContent = 'N/A';
        }
        row.appendChild(badgesCell);

        const adminTagCell = document.createElement('td');
        adminTagCell.textContent = member.admin_tag;
        row.appendChild(adminTagCell);

        const lastDynamicCell = document.createElement('td');
        lastDynamicCell.textContent = member.last_dynamic || 'N/A';
        row.appendChild(lastDynamicCell);

        const maxIdCell = document.createElement('td');
        maxIdCell.textContent = member.max_id || 'N/A';
        row.appendChild(maxIdCell);

        const posts2CreatorBadgeCell = document.createElement('td');
        posts2CreatorBadgeCell.textContent = member.posts2_creator_badge;
        row.appendChild(posts2CreatorBadgeCell);

        return row;
    }

    // Function to populate the table
    function populateTable(data) {
        const tableBody = document.querySelector('#membersTable tbody');

        // Add registered members
        data.registered.forEach(member => {
            const row = createTableRow(member, true);
            tableBody.appendChild(row);
        });

        // Add unregistered members
        data.unRegister.forEach(member => {
            const row = createTableRow(member, false);
            tableBody.appendChild(row);
        });
    }

    // Function to fetch data from the API
    async function fetchData() {
        try {
            const response = await fetch('https://phantoms-backend.onrender.com/api/risingstones/guild-member');
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            const data = await response.json();
            populateTable(data.data);
        } catch (error) {
            console.error('There has been a problem with your fetch operation:', error);
        }
    }

    // Fetch data when the document is ready
    document.addEventListener('DOMContentLoaded', fetchData);
</script>
</body>
</html>